@page
@{ Layout = "_LayoutApp"; }
@section Styles{
    <style>
        html {
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

        body {
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }
    </style>
}
<div class="bg-cover vw-100 vh-100 position-relative" style="background-image:url('/sitefiles/assets/images/pk/coverapp.jpg');" v-if="room">
    <div class="text-light position-absolute top-0 start-0 w-100 p-2 fs-6">
        <div class="text-center text-light py-3 fs-4">
            {{ title }}
        </div>
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <div>
                    {{ room.userA.displayName }}
                </div>
                <div>{{ room.answerTotal_A }}-{{ room.rightTotal_A }} {{ room.durationTotal_A }}</div>
            </div>
            <div class="text-center">
                <div class="avatar avatar-sm">
                    <img :src="room.userA.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                </div>
            </div>
            <div class="text-center">
                <div>{{ room.roomName }}</div>
                <div class="text-warning">vs</div>
            </div>
            <div class="text-center">
                <div class="avatar avatar-sm">
                    <img :src="room.userB.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                </div>
            </div>
            <div>
                <div>
                    {{ room.userB.displayName }}
                </div>
                <div class="text-end">{{ room.durationTotal_B }} {{ room.answerTotal_B }}-{{ room.rightTotal_B }}</div>
            </div>
        </div>
    </div>
    <div class="position-absolute top-50 start-50 translate-middle">
        <div class="rounded-0 border-0 bg-dark opacity-75 text-light z-1">
            <div class="d-flex justify-content-between align-items-center z-2">
                <div class="text-center">
                    <div class="bg-dark px-5 py-3 text-center">
                        <p>
                            <div v-if="room.winUserId==room.userId_A">
                                <div class="avatar avatar-lg">
                                    <img :src="room.userA.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                                </div>
                                <span>{{ room.userA.displayName }}</span>
                            </div>
                            <div v-else>
                                <div class="avatar avatar-lg">
                                    <img :src="room.userB.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                                </div>
                                <span>{{ room.userB.displayName }}</span>
                            </div>
                        </p>
                        <p class="pt-3 fs-1 text-success">胜</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bg-cover vw-100 vh-100 position-relative" style="background-image:url('/sitefiles/assets/images/pk/cover.jpg');" v-else>
</div>
<div style="position:fixed;left:0;bottom:0;width:100%;" class="text-center mb-5 animate__animated animate__fadeInUp">
    <el-button-group class="rounded-0">
        <el-button class="rounded-0" type="primary" v-on:click="utils.closeLayerSelf" icon="el-icon-back">返 回</el-button>
    </el-button-group>
</div>
@section Scripts{
    <script src="/sitefiles/assets/js/app/exam/examPkResult.js" type="text/javascript"></script>
}